<template>
	<view class="container">
		<view class="header">
			<view class="head-container">
				<view class="head-left" @click="closeBack">
					<uni-icons type="closeempty" color="white" size="20"></uni-icons>
				</view>
				<view class="head-center"></view>
				<view class="head-right" @click="frontBack">
					<uni-icons type="loop" color="white" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-container">
				<view class="bottom-center" @click="cameraChoose">
					<uni-icons type="circle-filled" color="white" size="40"></uni-icons>
				</view>
			</view>
		</view>
		<view class="video-stream">
			<video id="video" object-fit="cover" class="video" :controls="false" :show-fullscreen-btn="false" :show-progress="false" :show-play-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false" :mobilenet-hint-type="0" :src="src"></video>
		</view>
	</view>
</template>


<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { onShow,onHide } from '@dcloudio/uni-app'
	let src = ref < string > ()
	let front_back = ref < string > ('back')
	onMounted(() => {
		
	})
	onShow(()=>{
		uni.hideTabBar();
	})
	onHide(()=>{
		uni.showTabBar();
	})
	
	const closeBack = () => {
		console.log('back')
		uni.switchTab({
		    url: '/pages/index/index'
		})
	}
	const frontBack = () => {
		front_back.value=front_back.value=='back'?'front':'back'
	}
	const cameraChoose=()=>{
		if(front_back.value=='back'){
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				maxDuration:15,
				camera:'back',
				success: function (res) {
					console.log(res)
					console.log(src)
					if (res.duration < 15){
						src.value = res.tempFilePath;
						uni.navigateTo({
							url:'/pages/camera/cameraed?tempFilePath='+res.tempFilePath
						})
					} else {
					  uni.showToast({
						title: '视频最长上传15秒',
						icon: 'none',
						duration: 3000
					  })
					}
				}
			});
		}else{
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				maxDuration:15,
				camera:'front',
				success: function (res) {
					console.log(res)
					console.log(src)
					if (res.duration < 15){
						src.value = res.tempFilePath;
						uni.navigateTo({
							url:'/pages/camera/cameraed?tempFilePath='+res.tempFilePath
						})
					} else {
					  uni.showToast({
						title: '视频最长上传15秒',
						icon: 'none',
						duration: 3000
					  })
					}
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	body,
	html {
		width: 100%;
		height: 100%;
		padding: 0px;
		border: 0px;
	}
	.container {
		width: 100%;
		height: 100vh;
		background-color: black;
	}
	.header {
		font-size: 30rpx;
		line-height: 100rpx;
		color: white;
		width: 100%;
		height: 100rpx;
		display: flex;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 10000;
		.head-container{
			width:730rpx;
			height:80rpx;
			margin:auto;
			.head-left{
				width:80rpx;
				height:80rpx;
				float: left;
				text-align: center;
				line-height: 80rpx;
				
			}
			.head-right{
				width:80rpx;
				height:80rpx;
				float: right;
				text-align: center;
				line-height: 80rpx;
				
			}
		}
	}
	.bottom {
		font-size: 30rpx;
		line-height: 120rpx;
		color: white;
		width: 100%;
		height: 120rpx;
		display: flex;
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 10000;
		.bottom-container{
			width:730rpx;
			height:120rpx;
			margin:auto;
			.bottom-center{
				width:120rpx;
				height:120rpx;
				text-align: center;
				line-height: 120rpx;
				margin: auto;
				
			}
		}
	}
	
	.video-stream{
		width:100%;
		height:100%;
		.video {
			width: 100%;
			height: 100%;
		}
	}
</style>
